<!DOCTYPE html>
<html lang="zh-cn">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Introduction</title>

    <!-- Custom fonts for this template-->
    <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
    
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <link
        href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
        rel="stylesheet">

    <!-- Custom styles for this template-->
    <link href="css/sb-admin-2.min.css" rel="stylesheet">

    <style>
        .jumbotron {
        height: 700px;
        width: 1500px;
        margin-top: 80px;
        margin-left: 200px;
        margin-bottom: 0px;
        background-image: url(img/Dalian.jpg);
        /* background-color: mediumaquamarine; */
        background-position: 0% 25%;
        background-size: cover;
        background-repeat: no-repeat;
        color: white;
        /* text-shadow: black 0.3em 0.3em 0.3em; */
        box-shadow: 0px 10px 10px black;
    }

        .container-fluid{
            margin-top: 40px;
            margin-left: 170px;
            width: 1550px;
        }
    </style>

</head>

<body>
    <div class="jumbotron">
        <div style="margin-left: 100px; margin-top: 80px;margin-right: 200px;">
        <h1 style="color: white;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, sans-serif;color:floralwhite; font-weight: bold; font-size: 18mm;text-shadow: black 0.1em 0.1em 0.1em;">Group 5<br>医药批发商务平台: COASIS</h1>
        <h2 style="color: black;"><br>医药批发商务平台是“以客户为导向，以订单为目的”的新一版电子商务平台，主要为机构之间提供订单交易功能。本系统将平台中的角色分为机构和用户两个级别进行管理，平台管理机构，机构管理自己的用户；平台将机构分为买方、卖方、厂商等不同的机构角色，并对机构进行分类管理，平台管理卖方，卖方管理买方；机构将用户分为管理员和操作员，管理员对操作员、商品资料进行管理，操作员处理订单。</h2>
        <br>
        <p style="font-family: Verdana, Geneva, Tahoma, sans-serif;"><a class="btn btn-primary btn-lg" href="login.html" role="button">跳转至COASIS</a></p>
        </div>
    </div>

    <!-- Begin Page Content -->
    <div class="container-fluid">

        <!-- Page Heading -->
        <h1 class="h1 mb-1 text-gray-800">工程介绍</h1>
        <p class="mb-4" style="font-size: 4.5mm;">主要分为三个部分：小组成员分工介绍、项目亮点介绍和技术栈介绍</p>

        <!-- Content Row -->
        <div class="row">

            <!-- First Column -->
            <div class="col-lg-4">

                <!-- Custom Text Color Utilities -->
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h1 class="m-0 font-weight-bold text-primary">PART 1: 小组成员分工</h1>
                    </div>
                    <div class="card-body">
                        <!-- <div class="px-3 py-5 bg-gradient-secondary text-white">李铭宇:<br>需求分析；<br>后端开发：药品管理模块，用户注册模块，订单管理，卖方对买方管理；<br>前后端对接。</div>
                        <div class="px-3 py-5 bg-gradient-success text-white">.bg-gradient-success</div>
                        <div class="px-3 py-5 bg-gradient-info text-white">.bg-gradient-info</div>
                        <div class="px-3 py-5 bg-gradient-warning text-white">.bg-gradient-warning</div>
                        <div class="px-3 py-5 bg-gradient-light text-white">.bg-gradient-light</div>
                        <div class="px-3 py-5 bg-gradient-dark text-white">.bg-gradient-dark</div> -->
                        <div class="card shadow mb-4">
                            <!-- Card Header - Accordion -->
                            <a href="#li" class="d-block card-header py-3" data-toggle="collapse"
                                role="button" aria-expanded="true" aria-controls="collapseCardExample">
                                <h2 class="m-0 font-weight-bold text-success">李铭宇</h2>
                            </a>
                            <!-- Card Content - Collapse -->
                            <div class="collapse show" id="li">
                                <div class="card-body" style="font-size: 4.5mm;">
                                    <strong>1. 需求分析</strong><br><strong>2. 后端开发：</strong>药品管理模块、用户注册模块、订单管理、卖方对买方管理<br><strong>3. 前后端对接</strong>
                                </div>
                            </div>
                        </div>
                        <div class="card shadow mb-4">
                            <!-- Card Header - Accordion -->
                            <a href="#hao" class="d-block card-header py-3" data-toggle="collapse"
                                role="button" aria-expanded="true" aria-controls="collapseCardExample">
                                <h2 class="m-0 font-weight-bold text-warning">郝文韬</h2>
                            </a>
                            <!-- Card Content - Collapse -->
                            <div class="collapse show" id="hao">
                                <div class="card-body" style="font-size: 4.5mm;">
                                    <strong>1. 需求分析</strong><br><strong>2. 后端开发：</strong>药品管理模块、卖方用户接口、机构更新、卖方分组、厂商模块，<br><strong>3. 前后端对接</strong>
                                </div>
                            </div>
                        </div>
                        <div class="card shadow mb-4">
                            <!-- Card Header - Accordion -->
                            <a href="#yu" class="d-block card-header py-3" data-toggle="collapse"
                                role="button" aria-expanded="true" aria-controls="collapseCardExample">
                                <h2 class="m-0 font-weight-bold text-info">于勃仰</h2>
                            </a>
                            <!-- Card Content - Collapse -->
                            <div class="collapse show" id="yu">
                                <div class="card-body" style="font-size: 4.5mm;"> 
                                    <strong>1. 后端开发：</strong>用户登录模块，买方申请、修改功能，卖方管理审核以及分组功能，买卖双方提交、同意、中止采购计划功能实现，平台管理员的部分功能<br><strong>2. 结合测试书写文档</strong>
                                </div>
                            </div>
                        </div>
                        <div class="card shadow mb-4">
                            <!-- Card Header - Accordion -->
                            <a href="#geng" class="d-block card-header py-3" data-toggle="collapse"
                                role="button" aria-expanded="true" aria-controls="collapseCardExample">
                                <h2 class="m-0 font-weight-bold text-dark">耿哲</h2>
                            </a>
                            <!-- Card Content - Collapse -->
                            <div class="collapse show" id="geng">
                                <div class="card-body" style="font-size: 4.5mm;">
                                    <strong>1. 后端开发：</strong>用户、平台、药品、订单管理<br><strong>2. 结合测试书写文档</strong><br><strong>3. 数据库更新维护</strong>
                                </div>
                            </div>
                        </div>
                        <div class="card shadow mb-4">
                            <!-- Card Header - Accordion -->
                            <a href="#chen" class="d-block card-header py-3" data-toggle="collapse"
                                role="button" aria-expanded="true" aria-controls="collapseCardExample">
                                <h2 class="m-0 font-weight-bold text-danger">陈倩</h2>
                            </a>
                            <!-- Card Content - Collapse -->
                            <div class="collapse show" id="chen">
                                <div class="card-body" style="font-size: 4.5mm;">
                                    <strong>1. 前端开发：</strong>卖方机构管理员页面、买方机构管理员页面、卖方操作员页面、买方操作员页面、机构药品管理员页面、工程介绍页面<br><strong>2. 前后端对接</strong>
                                </div>
                            </div>
                        </div>
                        <div class="card shadow mb-4">
                            <!-- Card Header - Accordion -->
                            <a href="#zhu" class="d-block card-header py-3" data-toggle="collapse"
                                role="button" aria-expanded="true" aria-controls="collapseCardExample">
                                <h2 class="m-0 font-weight-bold text-truncate">朱婧旖</h2>
                            </a>
                            <!-- Card Content - Collapse -->
                            <div class="collapse show" id="zhu">
                                <div class="card-body" style="font-size: 4.5mm;">
                                    <strong>1. 前端开发：</strong>登录界面、注册用户界面、找回密码界面、加入或创建平台界面、平台管理员界面<br><strong>2. 前后端对接</strong>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <!-- Second Column -->
            <div class="col-lg-4">

                <!-- Background Gradient Utilities -->
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h1 class="m-0 font-weight-bold text-primary">PART 2: 项目亮点</h1>
                    </div>
                    <div class='card-body' style="font-size: 4.5mm;">
                        <div class="card mb-4 py-3 border-bottom-info">
                            <div class="card-body">
                                <strong>对用户隐私信息加密:</strong><br>密码等用户隐私以MD5加密的方式进行存储，防止隐私信息以明文的方式在前后端进行传输，保证系统的安全性
                            </div>
                        </div>
                        <div class="card mb-4 py-3 border-bottom-success">
                            <div class="card-body">
                                <strong>在订单系统中加入“锁”机制，防止并发操作造成错误:</strong><br>订单系统中的并发操作可能会导致写冲突的状况，我们在订单管理中加入“锁”机制，可以避免买卖双方同时编辑订单信息
                            </div>
                        </div>

                        <div class="card mb-4 py-3 border-bottom-warning">
                            <div class="card-body">
                                <strong>使用Bootstrap Datatable:</strong><br>使用Bootstrap Datatable展示数据、使用Datatable内嵌Ajax接受后端的数据或传递数据到后端。能够使数据更有条理的被展示、页面更美观，并且Datatable内嵌了查找等功能，能够带给用户更好的体验。
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <!-- Third Column -->
            <div class="col-lg-4">

                <!-- Grayscale Utilities -->
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h1 class="m-0 font-weight-bold text-primary">PART 3: 技术栈</h1>
                    </div>
                    <div class="card-body" style="font-size: 4.5mm;">
                        <div>
                            <div class="card border-BOTTOM-success shadow h-100 py-2">
                                <div class="card-body">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col mr-2">
                                            <div class="text-lg font-weight-bold text-primary text-uppercase mb-1" style="font-size: 5mm;">前端</div>
                                            <span class="label label-default">JavaScript</span>
                                            <span class="label label-primary">CSS</span>
                                            <span class="label label-success">HTML</span>
                                            <span class="label label-info">jquery</span>
                                            <span class="label label-warning">Bootstrap</span>
                                            <span class="label label-danger">Ajax</span>
                                        </div>
                                        <div class="col-auto">
                                            <i class="fas fa-wrench fa-2x text-gray-300"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div>
                            <div class="card border-BOTTOM-success shadow h-100 py-2">
                                <div class="card-body">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col mr-2">
                                            <div class="text-lg font-weight-bold text-primary text-uppercase mb-1" style="font-size: 5mm;">后端</div>
                                            <span class="label label-primary">Springboot</span>
                                        </div>
                                        <div class="col-auto">
                                            <i class="fas fa-clipboard-list fa-2x text-gray-300"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div>
                            <div class="card border-BOTTOM-success shadow h-100 py-2">
                                <div class="card-body">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col mr-2">
                                            <div class="text-lg font-weight-bold text-primary text-uppercase mb-1" style="font-size: 5mm;">前后端对接</div>
                                            <span class="label label-success">RESTful API</span>
                                        </div>
                                        <div class="col-auto">
                                            <i class="fas fa-cog fa-2x text-gray-300"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>
    <!-- /.container-fluid -->


</body>

<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>

<!-- Custom scripts for all pages-->
<script src="js/sb-admin-2.min.js"></script>

</html>